<template>
  <div class="rulesTree">
    <div class="treeTitle rulesATitle">
      <a href="javascript:void(0)" class="relative">
        {{lotteryTreeData.title.name}}
      </a>
    </div>
    <div class="ruleTreeListBox scrollBar">
      <div class="lotteryTreeList" v-for="(listDataItem,listDataIndex) in lotteryTreeData.listData">
        <!--二级导航-->
        <div class="treeListTitle relative" @click="firstTree(listDataIndex, listDataItem.code)">
          <img :src="listDataItem.icon" alt="">{{listDataItem.name}}
          <Icon type="chevron-down" class="downArrow"></Icon>
        </div>
        <ul class="secondTree">
          <li class="secondTreeList" v-for="secondListDataItem in listDataItem.subKindList"
              :class="{'on': letterTrue == (secondListDataItem.isDefault=='2'?secondListDataItem.creditCode:secondListDataItem.officialCode)}"
              @click="letterSecond(secondListDataItem.isDefault=='2'?secondListDataItem.creditCode:secondListDataItem.officialCode)">
            <router-link
                :to="{name:'colorRules', query: {code: secondListDataItem.isDefault=='2'?secondListDataItem.creditCode:secondListDataItem.officialCode}}">
              <img :src="secondListDataItem.icon" alt="">{{secondListDataItem.name}}
            </router-link>
          </li>
        </ul>

      </div>
    </div>

  </div>
</template>

<script>
  import './main.scss';
  import {mapState} from 'vuex';
  export default {
    data() {
      return {
        lotteryTreeData: {
          title: {
            name: "彩种规则",
            icon: require('../../../assets/images/theColor/colorIcon/color02.png'),
            routerName: 'theColor'
          },
          listData: [],
        },
        lotImg: require('../../../assets/images/theColor/colorIcon/color02.png'),
        letterTrue: 0,
        currentCode:'',
      }
    },
    computed: {
      ...mapState({
        allLotteryListData: state => state.mutations.allLotteryListData, //所有彩种
      })
    },
    activated() {
      this.init();
    },
    mounted() {
      $('.ruleTreeListBox').height($(".rulesTree").height()-$(".rulesATitle").outerHeight());
      $(window).resize(function () {
        $('.ruleTreeListBox').height($(".rulesTree").height()-$(".rulesATitle").outerHeight());
      });
    },
    methods: {
      init() {
        $('.ruleTreeListBox').height($(".rulesTree").height()-$(".rulesATitle").outerHeight());
        this.initData();
      },
      initData() {
        let that = this;
        that.lotteryTreeData.listData = that.allLotteryListData.tradition||[];
        setTimeout(() => {
          if (that.$route.query.code) {
            that.showSecondTree(that.getNavIndex());
            that.letterTrue = that.currentCode==that.$route.query.code?that.$route.query.code:that._Util.checkLotteryCode(that.$route.query.code);
          }
        }, 800);
      },
      //一级导航点击事件
      firstTree(index, id) {
        $(".secondTree").stop().slideUp(300);
        $(".secondTree").eq(index).stop().slideToggle(300);
        if ($(".downArrow").eq(index).hasClass('upArrow')) {
          $(".downArrow").eq(index).removeClass('upArrow');
        } else {
          $(".downArrow").removeClass('upArrow');
          $(".downArrow").eq(index).addClass('upArrow');
        }
      },
      //显示指定二级菜单
      showSecondTree(index, id) {
        if (index >= 0) {
          $(".secondTree").stop().slideUp(300);
          $(".secondTree").eq(index).stop().slideDown(300);
          $(".downArrow").removeClass('upArrow');
          $(".downArrow").eq(index).addClass('upArrow');
        } else {
          $(".secondTree").stop().slideUp(300);
          $(".downArrow").removeClass('upArrow');
        }
      },
      //获取导航下标值
      getNavIndex() {
        let that = this;
        let firstIndex = 0;
        that.lotteryTreeData.listData.forEach((v, i) => {
          v.subKindList.forEach((val, j) => {
            val.code = val.isDefault == '2' ? val.creditCode : val.officialCode;
            if (val.code == that.$route.query.code || val.code == that._Util.checkLotteryCode(that.$route.query.code)) {
              that.currentCode = val.code;
              firstIndex = i;
            }
          });
        });
        return firstIndex;
      },
      letterSecond(index) {
        this.letterTrue = index;
      }
    },
    components: {},
    watch: {
      '$route.query.code'() {
        this.letterTrue = this.$route.query.code;
        if (this.$route.query.code) {
          this.showSecondTree(this.getNavIndex());
          this.letterTrue = this.currentCode == this.$route.query.code ? this.$route.query.code : this._Util.checkLotteryCode(this.$route.query.code);
        }
      },
      'allLotteryListData.tradition'(){
        this.init();
      }
    }
  }
</script>
